<template>
  <view class="page-body flex-col">
    <view>
      <u-sticky h5-nav-height="0">
        <view class="top">
          <view v-for="(item, index) in list" :key="index">
            <view
              style="margin-right: 60rpx"
              :class="
                item.active == active ? 'top_c active' : 'top_c active_no'
              "
              @click="toActive(index)"
            >
              <view
                ><text>{{ item.item }}</text>
                <u-icon
                  name="arrow-down-fill"
                  color="#000"
                  size="16"
                  v-if="index == 0"
                  @click="showDate"
                ></u-icon
              ></view>
              <view class="line" v-if="active == item.active"></view>
            </view>
          </view>
        </view>
      </u-sticky>
    </view>
    <scroll-view
      @scrolltolower="lower"
      scroll-y="true"
      class="page-content flex-h-1"
    >
      <view class="order_msg">
        <view class="msg_top">
          <view class="msg_o">
            <view>
              <text class="order_n">{{ content.total.confirm_num }}</text>
              <text class="order_o" style="margin-left: 10rpx">单</text>
            </view>
            <view class="order_t"> 完成订单 </view>
          </view>
          <view class="msg_o">
            <view>
              <text class="order_n">{{ content.total.cancel_num }}</text>
              <text class="order_o" style="margin-left: 10rpx">单</text>
            </view>
            <view class="order_t"> 取消订单 </view>
          </view>
          <view class="msg_o">
            <view>
              <text class="order_n">{{ content.total.total_distance }}</text>
              <text class="order_o" style="margin-left: 10rpx">km</text>
            </view>
            <view class="order_t"> 配送里程 </view>
          </view>
        </view>
        <view class="shouru_msg">收入相关信息请前往“我的账户”查看</view>
      </view>
      <view class="order_title">订单明细</view>
      <view class="order_status">
        <text
          :class="item.index == to_active ? 'status select_status' : 'status'"
          v-for="(item, index) in to_list"
          :key="index"
          @click="changeStatus(item)"
          >{{ item.name }}
        </text>
      </view>
      <view v-if="order_list.length">
        <view
          class="list"
          v-for="item in order_list"
          :key="item.id"
          @click="toDetail(item)"
        >
          <view class="list_content">
            <view class="list_time">
              <text
                >{{
                  getMinutes(item.confirm_time * 1000)
                }}&nbsp;&nbsp;送达</text
              >
            </view>
            <view class="list_title">
              <view
                style="
                  width: 10rpx;
                  height: 10rpx;
                  background: #fe5f0f;
                  border-radius: 50%;
                  margin-right: 10rpx;
                "
              ></view>
              <view class="title">
                <text>{{ item.store_name }}</text>
                <text style="margin-left: 30rpx"
                  >#{{ item.order_no.slice(-4) }}</text
                >
              </view>
            </view>
            <view class="list_title">
              <view
                style="
                  width: 10rpx;
                  height: 10rpx;
                  background: #01ab5b;
                  border-radius: 50%;
                  margin-right: 10rpx;
                "
              ></view>
              <view class="title">{{ item.address }}</view>
            </view>
            <view class="order">订单编号:{{ item.order_no }}</view>
          </view>
          <u-icon name="arrow-right" color="#8c8c8c" size="16"></u-icon>
        </view>
        <u-loadmore :status="status"></u-loadmore>
      </view>
      <u-empty mode="data" v-else></u-empty>
    </scroll-view>
    <u-calendar
      v-model="calendar_show"
      :mode="mode"
      @change="change"
    ></u-calendar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      //   date: new Date(),
      date_str: "",
      calendar_show: false,
      status: "loadmore",
      mode: "date",
      active: 0,
      to_active: 0,
      pageNo: 1,
      order_list: [],
      list: [
        {
          active: 0,
          item: "",
        },
        {
          active: 1,
          item: "月订单",
        },
      ],
      to_list: [
        {
          index: 0,
          name: "已完成",
        },
        {
          index: 1,
          name: "已取消",
        },
      ],
      content: {},
    };
  },

  onLoad() {
    var date = new Date(); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var Y = date.getFullYear();
    var M =
      date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1;
    var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    this.list[0].item = Y + "-" + M + "-" + D;
    this.getList();
  },
  methods: {
    toDetail(i){
        this.$utils.toUrl(`/distribution/order/order_detail?active=${this.to_active}&i=`+encodeURIComponent(JSON.stringify(i)), "navigate")
    },
    async getList() {
      const res = await this.$allrequest.distribution.getInfoList({
        begin_time: this.list[0].item,
        end_time: this.list[0].item,
        pageNo: this.pageNo,
      });
      if (res.code == 0) {
        this.content = res.data;
        if (this.to_active == 0) {
          this.order_list = res.data.confirm_list.data;
          this.status =
            res.data.confirm_list.data.length <= 10 ? "nomore" : "loadmore";
          this.pageNo++;
        } else {
          this.order_list = res.data.cancel_list.data;
          this.status =
            res.data.cancel_list.data.length <= 10 ? "nomore" : "loadmore";
        }
      }
    },
   async toActive(i) {
      this.active = i;
      this.pageNo=1;
       const res = await this.$allrequest.distribution.getInfoList({
        begin_time: this.getDate()+'-'+'01',
        end_time: '',
        pageNo: this.pageNo,
      });
      if (res.code == 0) {
        this.content = res.data;
        if (this.to_active == 0) {
          this.order_list = res.data.confirm_list.data;
          this.status =
            res.data.confirm_list.data.length <= 10 ? "nomore" : "loadmore";
          this.pageNo++;
        } else {
          this.order_list = res.data.cancel_list.data;
          this.status =
            res.data.cancel_list.data.length <= 10 ? "nomore" : "loadmore";
            this.pageNo++
        }
      }
    },
    showDate() {
      this.calendar_show = true;
    },
    async lower() {
      if (this.status == "nomore") return;
      const res = await this.$allrequest.distribution.getInfoList({
        begin_time: this.list[0].item,
        end_time: this.list[0].item,
        pageNo: this.pageNo,
      });
      if (res.code == 0) {
        this.content = res.data;
        if (this.to_active == 0) {
          this.order_list.push(...res.data.confirm_list.data);
          this.status =
            res.data.confirm_list.data.length <= 10 ? "nomore" : "loadmore";
          this.pageNo++;
        } else {
          this.order_list.push(...res.data.cancel_list.data);
          this.status =
            res.data.cancel_list.data.length <= 10 ? "nomore" : "loadmore";
            this.pageNo++;
        }
      }
    },
      getDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      let hour = date.getHours(); // 获取小时
      let minute = date.getMinutes(); // 获取分钟
      let second = date.getSeconds(); // 获取秒数
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      // var currentdate = year + seperator1 + month + seperator1 + strDate;
      var currentdate =
        year +
        seperator1 +
        month
      return currentdate;
    },
    change(e) {
      this.list[0].item = e.result;
      this.pageNo=1,
      this.getList()
    },
    changeStatus(val) {
      this.to_active = val.index;
      this.pageNo=1;
      this.getList();
    },
    getMinutes(val) {
      var date = new Date(val);
      let hour = date.getHours(); // 获取小时
      let minute = date.getMinutes(); // 获取分钟

      if (hour >= 1 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minute >= 0 && minute <= 9) {
        minute = "0" + minute;
      }
      return hour + ":" + minute;
    },
  },
};
</script>

<style lang="scss" scoped>
.page-body {
  min-height: 100vh;
  background: #fff;
  //   padding: 24rpx;
  padding-top: 24rpx;
  .top {
    display: flex;
    padding-left: 34rpx;
    border-bottom: 2rpx solid #f8f8f8;
    .top_c {
      display: flex;
      flex-direction: column;
      align-items: center;
      .line {
        width: 42rpx;
        height: 6rpx;
        background: #f0250e;
        margin-top: 10rpx;
      }
    }
    .active {
      font-size: 26rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #262626;
    }
    .active_no {
      font-size: 26rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #262626;
    }
  }
  .order_msg {
    width: 702rpx;
    height: 248rpx;
    background: linear-gradient(180deg, #f22407 0%, #f84d17 100%);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 24rpx auto;
    padding: 40rpx 40rpx 40rpx 24rpx;
    .msg_top {
      display: flex;
      justify-content: space-around;
      padding-bottom: 24rpx;
      border-bottom: 2rpx solid #fb8a6a;
      .msg_o {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-family: PingFang SC-Semibold, PingFang SC;
        color: #ffffff;
        font-size: 24rpx;

        .order_n {
          font-weight: 600;
          font-size: 56rpx;
        }
        .order_t {
          margin-top: 10rpx;
        }
      }
    }
    .shouru_msg {
      font-size: 20rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #fb8a6a;
      text-align: center;
      padding-top: 14rpx;
    }
  }
  .order_title {
    margin: 24rpx;
    font-size: 30rpx;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #262626;
  }
  .order_status {
    margin-left: 34rpx;
    margin-bottom: 24rpx;
    .status {
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #8c8c8c;
      &:first-child {
        &::after {
          content: "|";
          color: #8c8c8c;
          font-weight: 400;
          margin: 0rpx 20rpx;
        }
      }
    }
    .select_status {
      font-size: 28rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #262626;
    }
  }
  .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 702rpx;
    margin: 0 auto;
    border-bottom: 2rpx solid #f8f8f8;
    padding: 24rpx 0;
    .list_content {
      //   height: 244rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      .list_time {
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #262626;
        margin-bottom: 20rpx;
      }
      .list_title {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;
        .title {
          font-size: 24rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #262626;
        }
      }
    }
  }
  .order {
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #8c8c8c;
    margin-top: 20rpx;
  }
}
</style>
